<template>
    <div class="sys-page">
        <app-title title="销售回款率目标设置(%)"></app-title>
        <app-search>
            <el-form :model="ratio" :label-position="$store.labelPosition" label-width="30%"
                     ref="ratio" :rules="rules">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="年份：" label-width="15%">
                            <el-date-picker  v-model="defYear" :default-value="defYear"
                                             type="year" placeholder="选择年" @change="searchRatio()">
                            </el-date-picker>
                        </el-form-item>

                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="9">
                        <el-form-item label="1月：" prop="jan">
                            <el-input-number v-model="ratio.jan" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="2月：" prop="feb">
                            <el-input-number v-model="ratio.feb"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="3月：" prop="mar">
                            <el-input-number v-model="ratio.mar"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="4月：" prop="apr">
                            <el-input-number v-model="ratio.apr"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="5月：" prop="may">
                            <el-input-number v-model="ratio.may"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="6月：" prop="jun">
                            <el-input-number v-model="ratio.jun"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="7月：" prop="jul">
                            <el-input-number v-model="ratio.jul"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="8月：" prop="aug">
                            <el-input-number v-model="ratio.aug"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="9月：" prop="sep">
                            <el-input-number v-model="ratio.sep"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="10月：" prop="oct">
                            <el-input-number v-model="ratio.oct"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="11月：" prop="nov">
                            <el-input-number v-model="ratio.nov"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="12月：" prop="dece">
                            <el-input-number v-model="ratio.dece"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="18">
                        <el-form-item label-width="15%">
                            <el-button type="edit" icon="fa fa-save" @click="submitSave()">
                                保存
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </app-search>
    </div>
</template>

<script>
    import {validateNumber} from '@/util/rules'

    export default {
        data() {
            return {
                defYear: '',
                ratio:{},
                rules:{
                    jan:[{ validator: validateNumber, trigger: 'blur' }],
                    feb:[{ validator: validateNumber, trigger: 'blur' }],
                    mar:[{ validator: validateNumber, trigger: 'blur' }],
                    apr:[{ validator: validateNumber, trigger: 'blur' }],
                    may:[{ validator: validateNumber, trigger: 'blur' }],
                    jun:[{ validator: validateNumber, trigger: 'blur' }],
                    jul:[{ validator: validateNumber, trigger: 'blur' }],
                    aug:[{ validator: validateNumber, trigger: 'blur' }],
                    sep:[{ validator: validateNumber, trigger: 'blur' }],
                    oct:[{ validator: validateNumber, trigger: 'blur' }],
                    nov:[{ validator: validateNumber, trigger: 'blur' }],
                    dece:[{ validator: validateNumber, trigger: 'blur' }]
                }
            }
        },

        created() {
            this.defYear = new Date();
            this.searchRatio()
        },

        methods: {
            async searchRatio(){
                let res = await this.$axios.get(`/conf/loadRatio/${this.defYear.getFullYear()}`);
                console.log("Ratio: ", res)
                Object.assign(this.ratio, res.result)
            },

            submitSave(){
                this.$refs['ratio'].validate((valid) => {
                    if(valid){
                        this.saveRatio();
                    }
                });
            },

            async saveRatio(){
                let res = await this.$axios.post('/conf/saveRatio', this.ratio);
                console.log("返回主键: ", res)
                this.ratio.id = res.result;
                this.$myMsg.success("成功保存销售目标。");
            }


        },

    }
</script>

